import chroma from "chroma-js";
import mitt from "mitt";
import { defineStore } from "pinia";
import {
    ColorDetail,
    findSimilarColor,
} from "../../../package/similar-color/src";
import pallet from "./NormalPicker/basePallet.json";
type Pallet = { name: string; colors: string[]; using?: boolean };

export const colorUpdate = mitt<{
    resetHsl: undefined;
}>();

export const useColorPanelStore = defineStore("color-panel", {
    persist: {
        enabled: true,
        strategies: [
            {
                storage: localStorage,
            },
        ],
    },
    state: () => {
        const usingColor = chroma(pallet[0].colors[0]).rgb();
        const colorPallet = pallet.map((i) => {
            return { ...i, using: Math.random() > 0.7 };
        }) as Pallet[];
        return {
            colorPallet,
            // 将 rgb 作为通用流通数据
            usingColor: usingColor,
            usingPallet: colorPallet[0],
            selectingColorIndex: 0,
            // 打开的具体面板的 index
            routerViewIndex: 0,
            // 是否打开编辑器
            opened: true,
            // 是否打开侧栏
            sideBar: false,
        };
    },
    getters: {
        usingColorCss(state) {
            return chroma.rgb(...state.usingColor).hex();
        },

        ShowingPallet(state) {
            return state.colorPallet.filter((i) => i.using);
        },
    },
    actions: {
        /** 写一个 rgb 颜色进控制器 */
        setColor(rgb: [number, number, number], resetHsl = true) {
            this.usingColor = rgb;
            colorUpdate.emit("resetHsl");
        },
        /** 搜索控制器相近的中国颜色 */
        transToStandard(colorDetailArray: ColorDetail[]) {
            const result = findSimilarColor(
                colorDetailArray,
                this.usingColor
            ).sort((a, b) => a.distance - b.distance);
            return result;
        },
        checkIsExist(palletIndex: number) {
            if (
                this.usingPallet &&
                palletIndex >= 0 &&
                palletIndex < this.usingPallet.colors.length
            )
                return true;
            return false;
        },
        /** 将颜色控制器的颜色写回 */
        writeToPallet() {
            const palletIndex = this.selectingColorIndex;
            if (this.checkIsExist(palletIndex)) {
                this.usingPallet!.colors[palletIndex] = this.usingColorCss;
            }
        },
        /** 将调色板中选中的颜色写会颜色控制器 */
        resetColor() {
            const palletIndex = this.selectingColorIndex;
            if (this.checkIsExist(palletIndex)) {
                const color = chroma(
                    this.usingPallet!.colors[palletIndex]
                ).rgb();
                this.setColor(color);
            }
        },
        /** 删除一个色卡中的颜色 */
        deleteColorFromPallet() {
            const palletIndex = this.selectingColorIndex;
            if (this.checkIsExist(palletIndex)) {
                this.usingPallet!.colors.splice(palletIndex, 1);
            }
        },
        /** 添加控制器中的颜色到色卡 */
        addColorToPallet() {
            this.usingPallet?.colors.push(this.usingColorCss);
        },

        editPallet(index: number | Pallet) {
            this.usingPallet =
                typeof index === "number" ? this.colorPallet[index] : index;
            this.routerViewIndex = 0;
        },
        deletePallet(index: number) {
            this.colorPallet.splice(index, 1);
        },
        createPallet(name: string, colors: string[] = []) {
            const index = this.colorPallet.findIndex((i) => i.name === name);
            if (index === -1) {
                this.colorPallet.push({ name, colors, using: true });
            }
        },
    },
});
